let path = require("path");
let {CleanWebpackPlugin} = require("clean-webpack-plugin");
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
let HtmlWebpackPlugin = require("html-webpack-plugin");



module.exports = {
    // 配置多页面入口
    entry : {
        "index" : "./src/index/entry.js",
        "detail" : "./src/detail/entry.js",
        "assort-detail" : "./src/assort-detail/entry.js",
        "register" : "./src/register/entry.js",
        "login" : "./src/login/entry.js"
    },
    // 配置开发模式
    mode : "development",
    // 配置map文件，便于代码位置查询
    devtool : "source-map",
    // 配置多页面出口
    output : {
        path: path.resolve(__dirname, 'dist'),
        filename: "javascript/[name]-[hash:5].js",
    },
    // 配置loader
    module : {
        rules : [
            // 配置编译.css文件编译器
            {
                test : /\.css$/,
                use : [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            },
            // 配置编译.scss文件编译器
            {
                test : /\.scss$/,
                use : [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    // 配置plugin插件
    plugins : [
        // 清空dist文件夹插件
        new CleanWebpackPlugin(),
        // css抽离插件
        new MiniCssExtractPlugin({
            filename : "css/[name]-[hash:5].css"
        }),
        // html文件,有几个入口就调用几次
        new HtmlWebpackPlugin({
            template : "./src/index/index.html",
            inject : "body",
            chunks : ["index"],
            filename : "index.html"
        }),
        new HtmlWebpackPlugin({
            template : "./src/detail/detail.html",
            inject : "body",
            chunks : ["detail"],
            filename : "detail.html"
        }),
        new HtmlWebpackPlugin({
            template : "./src/assort-detail/assort-detail.html",
            inject : "body",
            chunks : ["assort-detail"],
            filename : "assort-detail.html"
        }),
        new HtmlWebpackPlugin({
            template : "./src/register/register.html",
            inject : "body",
            chunks : ["register"],
            filename : "register.html"
        }),
        new HtmlWebpackPlugin({
            template : "./src/login/login.html",
            inject : "body",
            chunks : ["login"],
            filename : "login.html"
        })
    ],
    // 配置dev-server服务器
    devServer : {
        port : 9000,
        hot : true,
        static: "public"
    }


}